<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="接口地址" prop="url">
        <el-input v-model="form.url" disabled placeholder="请在业务基本信息中选择关联表单"></el-input>
      </el-form-item>
      <el-form-item label="查询条件(选填)" prop="viewName">
        <preview v-if="schema.body[0].fields.length" ref="preview" :previewConfig="{schema}" />
      </el-form-item>
    </el-form>
    <div style="height:220px;" />
  </div>
</template>

<script>
  import preview from "@/views/tool/view/index.vue";
  import {getConditionsFields} from "@/utils/amisUtil.js";
  export default {
    name: 'apiInfo',
    components: {
      preview
    },
    props: {
      formKey: {
        type: String,
        defulat: ''
      },
      extraFormKeys: {
        type: Array,
        defulat: () => []
      },
      formColumns: {
        type: Object,
        defulat: () => {}
      },
      apiInfo: {
        type: Object,
        defulat: () => null
      },
    },
    watch: {
      formKey(val) {
        this.form = {
          url: '',
          conditions: {}
        }
        if (val) {
          this.form.url = `/openform/multiFormData/selectDataByFilter/${val}`
        }
      },
      extraFormKeys:{
        handler(val) {
          this.reset()
        },
        deep: true,
        immediate: true
      },
      formColumns: {
        handler(val) {
          this.reset()
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        timer:null,
        form: {
          url: '',
          conditions: {}
        },
        rules: {
          url: [{
            required: true,
            message: '请在业务基本信息中选择关联表单',
            trigger: 'blur'
          }, ],
        },
        schema: {
          "type": "form",
          "name": 'conditionsForm',
          "data": {},
          "debug": true,
          "wrapWithPanel": false,
          "body": [
            {
              "type": "condition-builder",
              "name": "conditions",
              "fields": [],
            }
          ]
        }
      };
    },
    created() {
      setTimeout(() => {
        if (this.apiInfo) {
          this.form.url = this.apiInfo.url
          this.form.conditions = this.apiInfo.conditions
          if(this.apiInfo.conditions){
            this.schema.data.conditions=this.apiInfo.conditions
          }
        }
      }, 500)
    },
    methods: {
      reset(){
        if(this.timer){
          clearTimeout (this.timer)
          this.timer=null
        }
        this.schema.body[0].fields=[]
        let keys = [this.formKey].concat(this.extraFormKeys),
          list = [];
        keys.forEach(key => {
          if (this.formColumns[key]) {
            this.formColumns[key].forEach(item => {
                list.push(item)
            })
          }
        })
        if (list && list.length) {
         this.timer= setTimeout(()=>{
            this.schema.body[0].fields = getConditionsFields(list,true)
            this.$forceUpdate()
          },1000)
        }
      },
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$refs.preview.getValues('conditionsForm').then(res => {
              this.form.conditions = res.conditions||{}
              this.$emit('setValue', {
                tabType: 'apiInfo',
                formData: this.form
              })
            })
          }
        });
      },
    }
  };
</script>
<style lang='scss' scoped>

</style>
